<template>
  <a-drawer width="95%" :title="title" :visible="open" @close="handleClose">
    <a-form-model ref="form" :model="form" :rules="rules" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
      <a-row :gutter="16">
        <a-divider orientation="left">表配置</a-divider>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="作者" prop="author">
            <a-input v-model="form.author" placeholder="请输入作者"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="父级包名" prop="parentPackage">
            <a-input v-model="form.parentPackage" placeholder="请输入父级包名"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="maven模块名称" prop="mavenModule">
            <a-input v-model="form.mavenModule" placeholder="请输入maven模块名称"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="模块名" prop="module">
            <a-input v-model="form.module" placeholder="请输入模块名"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="表名" prop="tableName">
            <a-input v-model="form.tableName" placeholder="请输入表名"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="表注释" prop="comment">
            <a-input v-model="form.comment" placeholder="请输入表注释"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="业务名" prop="business">
            <a-input v-model="form.business" placeholder="请输入业务名"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="实体类名" prop="entity">
            <a-input v-model="form.entity" placeholder="请输入实体类名"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="vo类名" prop="entityVo">
            <a-input v-model="form.entityVo" placeholder="请输入vo类名"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="controller类名" prop="controller">
            <a-input v-model="form.controller" placeholder="请输入controller类名"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="service类名" prop="service">
            <a-input v-model="form.service" placeholder="请输入service类名"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="service注入参数名" prop="serviceAttr">
            <a-input v-model="form.serviceAttr" placeholder="请输入service注入参数名"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="serviceImpl类名" prop="serviceImpl">
            <a-input v-model="form.serviceImpl" placeholder="请输入service_impl类名"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="mapper类名" prop="mapper">
            <a-input v-model="form.mapper" placeholder="请输入mapper类名"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="xml文件名" prop="mapperXml">
            <a-input v-model="form.mapperXml" placeholder="请输入xml文件名"/>
          </a-form-model-item>
        </a-col>
        <a-divider orientation="left">PC端页面配置</a-divider>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="页面类型" prop="pageType">
            <a-select v-model="form.pageType" placeholder="请选择页面类型">
              <a-select-option :value="1">单表</a-select-option>
              <a-select-option :value="2">树表</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="表单类型" prop="formType">
            <a-select v-model="form.formType" placeholder="请选择表单类型">
              <a-select-option :value="1">抽屉</a-select-option>
              <a-select-option :value="2">模态框</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="PC端" prop="isPc">
            <a-switch v-model="form.isPc" :active-value="1" :inactive-value="0" @change="isPcChange"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="新增" prop="isSave">
            <a-switch v-model="form.isSave" :active-value="1" :inactive-value="0"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="更新" prop="isUpdate">
            <a-switch v-model="form.isUpdate" :active-value="1" :inactive-value="0"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="删除" prop="isRemove">
            <a-switch v-model="form.isRemove" :active-value="1" :inactive-value="0"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="批量删除" prop="isRemoveBatch">
            <a-switch v-model="form.isRemoveBatch" :active-value="1" :inactive-value="0"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="导入" prop="isImport">
            <a-switch v-model="form.isImport" :active-value="1" :inactive-value="0"/>
          </a-form-model-item>
        </a-col>
        <a-col :sm="24" :md="12" :lg="8" :xl="6">
          <a-form-model-item label="导出" prop="isExport">
            <a-switch v-model="form.isExport" :active-value="1" :inactive-value="0"/>
          </a-form-model-item>
        </a-col>
        <a-divider orientation="left">表字段配置</a-divider>
        <a-col :span="24">
          <!-- 表格 -->
          <a-table
            :loading="loading"
            :size="tableSize"
            :columns="columns"
            :data-source="genTableColumnList"
            :pagination="false"
            :bordered="false">
            <template v-slot:columnComment="value, row">
              <a-input v-model="row.columnComment" placeholder="请输入列描述"/>
            </template>
            <template v-slot:javaType="value, row">
              <a-select v-model="row.javaType" style="width: 120px">
                <a-select-option value="String">String</a-select-option>
                <a-select-option value="Integer">Integer</a-select-option>
                <a-select-option value="Long">Long</a-select-option>
                <a-select-option value="Float">Float</a-select-option>
                <a-select-option value="Double">Double</a-select-option>
                <a-select-option value="Boolean">Boolean</a-select-option>
                <a-select-option value="Byte[]">Byte[]</a-select-option>
                <a-select-option value="BigDecimal">BigDecimal</a-select-option>
                <a-select-option value="Date">Date</a-select-option>
              </a-select>
            </template>
            <template v-slot:isPk="value, row">
              <a-switch v-model="row.isPk" :active-value="1" :inactive-value="0"/>
            </template>
            <template v-slot:isQuery="value, row">
              <a-switch v-model="row.isQuery" :active-value="1" :inactive-value="0"/>
            </template>
            <template v-slot:isForm="value, row">
              <a-switch v-model="row.isForm" :active-value="1" :inactive-value="0"/>
            </template>
            <template v-slot:isRequired="value, row">
              <a-switch v-model="row.isRequired" :active-value="1" :inactive-value="0"/>
            </template>
            <template v-slot:isTable="value, row">
              <a-switch v-model="row.isTable" :active-value="1" :inactive-value="0"/>
            </template>
            <template v-slot:isLogicDelete="value, row">
              <a-switch v-model="row.isLogicDelete" :active-value="1" :inactive-value="0"/>
            </template>
            <template v-slot:htmlType="value, row">
              <a-select v-model="row.htmlType">
                <a-select-option value="input">input</a-select-option>
                <a-select-option value="select">select</a-select-option>
                <a-select-option value="textarea">textarea</a-select-option>
              </a-select>
            </template>
            <template v-slot:queryType="value, row">
              <a-select v-model="row.queryType" style="width: 120px">
                <a-select-option value="=">=</a-select-option>
                <a-select-option value="like">like</a-select-option>
                <a-select-option value="between">between</a-select-option>
                <a-select-option value=">">></a-select-option>
                <a-select-option value=">=">>=</a-select-option>
                <a-select-option value="<"><</a-select-option>
                <a-select-option value="<="><=</a-select-option>
                <a-select-option value="!=">!=</a-select-option>
              </a-select>
            </template>
            <template v-slot:sort="value, row">
              <a-input type="number" v-model="row.sort" placeholder="请输入排序"/>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </a-form-model>
    <div class="bottom-control">
      <a-space>
        <a-button type="primary" :loading="submitLoading" @click="handleSubmit">保存</a-button>
        <a-button type="dashed" @click="handleClose">取消</a-button>
      </a-space>
    </div>
  </a-drawer>
</template>

<script>
import {tableMixin} from '@/store/table-mixin'
import {getGenTable, updateGenTable} from '@/api/generate/genTable'
import {listGenTableColumn} from '@/api/generate/genTableColumn'

export default {
  mixins: [tableMixin],
  data() {
    return {
      submitLoading: false,
      title: '',
      // 表单参数
      form: {},
      open: false,
      rules: {
        id: [{required: true, trigger: ['blur', 'change'], message: '请输入主键ID'}],
        author: [{required: true, trigger: ['blur', 'change'], message: '请输入作者'}],
        parentPackage: [{required: true, trigger: ['blur', 'change'], message: '请输入父级包名'}],
        mavenModule: [{required: true, trigger: ['blur', 'change'], message: '请输入maven模块名称'}],
        module: [{required: true, trigger: ['blur', 'change'], message: '请输入模块名'}],
        tableName: [{required: true, trigger: ['blur', 'change'], message: '请输入表名'}],
        comment: [{required: true, trigger: ['blur', 'change'], message: '请输入表注释'}],
        business: [{required: true, trigger: ['blur', 'change'], message: '请输入业务名'}],
        entity: [{required: true, trigger: ['blur', 'change'], message: '请输入实体类名'}],
        entityVo: [{required: true, trigger: ['blur', 'change'], message: '请输入vo类名'}],
        controller: [{required: true, trigger: ['blur', 'change'], message: '请输入controller类名'}],
        service: [{required: true, trigger: ['blur', 'change'], message: '请输入service类名'}],
        serviceAttr: [{required: true, trigger: ['blur', 'change'], message: '请输入service注入参数名'}],
        serviceImpl: [{required: true, trigger: ['blur', 'change'], message: '请输入service_impl类名'}],
        mapper: [{required: true, trigger: ['blur', 'change'], message: '请输入mapper类名'}],
        mapperXml: [{required: true, trigger: ['blur', 'change'], message: '请输入xml文件名'}],
        pageType: [{required: true, trigger: ['blur', 'change'], message: '请选择页面类型'}],
        formType: [{required: true, trigger: ['blur', 'change'], message: '请选择表单类型'}],
        isPc: [{required: true, trigger: ['blur', 'change'], message: '请选择是否PC端'}],
        isSave: [{required: true, trigger: ['blur', 'change'], message: '请选择是否新增'}],
        isUpdate: [{required: true, trigger: ['blur', 'change'], message: '请选择是否更新'}],
        isRemove: [{required: true, trigger: ['blur', 'change'], message: '请选择是否删除'}],
        isRemoveBatch: [{required: true, trigger: ['blur', 'change'], message: '请选择是否批量删除'}],
        isImport: [{required: true, trigger: ['blur', 'change'], message: '请选择是否导入'}],
        isExport: [{required: true, trigger: ['blur', 'change'], message: '请选择是否导出'}]
      },
      // 表格数据
      genTableColumnList: [],
      loading: false,
      queryParam: {
        tableId: 0,
        pageNum: 1,
        pageSize: 1000
      },
      columns: [
        {dataIndex: 'columnName', title: '列名称', align: 'center'},
        {dataIndex: 'columnComment', title: '列描述', align: 'center', scopedSlots: {customRender: 'columnComment'}},
        {dataIndex: 'columnType', title: '字段类型', align: 'center'},
        {dataIndex: 'javaPackage', title: 'java包名', align: 'center'},
        {dataIndex: 'javaType', title: 'java类型', align: 'center', scopedSlots: {customRender: 'javaType'}},
        {dataIndex: 'javaField', title: 'java属性名', align: 'center'},
        {dataIndex: 'isPk', title: '主键', align: 'center', scopedSlots: {customRender: 'isPk'}},
        {dataIndex: 'isQuery', title: '查询', align: 'center', scopedSlots: {customRender: 'isQuery'}},
        {dataIndex: 'isForm', title: '表单', align: 'center', scopedSlots: {customRender: 'isForm'}},
        {dataIndex: 'isRequired', title: '必填', align: 'center', scopedSlots: {customRender: 'isRequired'}},
        {dataIndex: 'isTable', title: '表格', align: 'center', scopedSlots: {customRender: 'isTable'}},
        {dataIndex: 'isLogicDelete', title: '逻辑删除', align: 'center', scopedSlots: {customRender: 'isLogicDelete'}},
        {dataIndex: 'htmlType', title: 'html类型', align: 'center', scopedSlots: {customRender: 'htmlType'}},
        {dataIndex: 'queryType', title: '查询方式', align: 'center', scopedSlots: {customRender: 'queryType'}},
        {dataIndex: 'sort', title: '排序', align: 'center', scopedSlots: {customRender: 'sort'}}
      ]
    }
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true
      listGenTableColumn(this.queryParam).then(res => {
        this.genTableColumnList = res.data
        this.loading = false
      })
    },
    /** 查询表信息 */
    getById() {
      getGenTable(this.queryParam.tableId).then(res => {
        this.form = res.data
      })
    },
    /** 点击关闭 */
    handleClose() {
      this.reset()
      this.open = false
    },
    /** 改变PC端状态 */
    isPcChange(e) {
      this.form.isPc = e ? 1 : 0
      this.form.isSave = e ? 1 : 0
      this.form.isUpdate = e ? 1 : 0
      this.form.isRemove = e ? 1 : 0
      this.form.isRemoveBatch = e ? 1 : 0
      this.form.isImport = e ? 1 : 0
      this.form.isExport = e ? 1 : 0
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: 0,
        author: '',
        parentPackage: '',
        mavenModule: '',
        module: '',
        tableName: '',
        comment: '',
        business: '',
        entity: '',
        entityVo: '',
        controller: '',
        service: '',
        serviceAttr: '',
        serviceImpl: '',
        mapper: '',
        mapperXml: '',
        pageType: 0,
        formType: 0,
        isSave: 0,
        isPc: 0,
        isUpdate: 0,
        isRemove: 0,
        isRemoveBatch: 0,
        isImport: 0,
        isExport: 0,
        genTableColumnJson: ''
      }
    },
    /** 点击修改 */
    handleUpdate(row) {
      this.reset()
      this.title = '修改代码生成'
      this.queryParam.tableId = row.id
      this.getById()
      this.getList()
      this.open = true
    },
    /** 点击保存 */
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.submitLoading = true
          this.form.genTableColumnJson = JSON.stringify(this.genTableColumnList)
          updateGenTable(this.form).then(res => {
            this.$message.success(res.msg)
            this.handleClose()
            this.$emit('ok')
          }).finally(() => {
            this.submitLoading = false
          })
        }
      })
    }
  }
}
</script>
